<template>
	<view class="uni_box home">
		<!-- <navbar title='安全中心' :yin="false">
		</navbar> -->
		<view class="lone">
			<image class="lfan" src="/static/img/lfan.png" @click="getfan" />
			<text class="Loginname">欢迎注册平台</text>
		</view>
		<view class="content">
			<view class="logoview">
				<!-- <image class="loview" src="/static/img/tou2.png" /> -->
			</view>
			<!-- <view class="qian">
				<text class="qbiao"></text>
				<text class="qname">修改登录密码</text>
			</view> -->
			<view class="uone">
				<view class="uhead">
					<text class="Input-label">邮箱</text>
				</view>
				<view class="ushuru">
					<u-input v-model="email" type="text" :border="false" placeholder="请输入"/>
				</view>
			</view>
			<view class="uone">
				<view class="uhead">
					<text class="Input-label">邀请码（必填）</text>
				</view>
				<view class="ushuru">
					<u-input v-model="ucode" type="text" :border="false" placeholder="请输入"/>
				</view>
			</view>
			<view class="uone" style="margin-bottom: 30rpx;">
				<view class="uhead">
					<text class="Input-label">设置密码</text>
				</view>
				<view class="ushuru">
					<u-input @input="inputchange" v-model="password" type="password" :border="false" placeholder="请输入"/>
				</view>
			</view>
			<view class="uone" style="margin-bottom: 30rpx;">
				<view class="uhead">
					<text class="Input-label">确认密码</text>
				</view>
				<view class="ushuru">
					<u-input v-model="password_confirmation" type="password" :border="false" placeholder="请输入"/>
				</view>
			</view>
			<view class="validate">
				<view class="validateitem">
					<image class="cha" src="/static/img/cha.png" v-if="!yan.length" />
					<image class="cha" src="/static/img/gou.png" v-if="yan.length" />
					<text class="valname">长度为 8-32个字符</text>
				</view>
				<view class="validateitem">
					<image class="cha" src="/static/img/cha.png" v-if="!yan.minname" />
					<image class="cha" src="/static/img/gou.png" v-if="yan.minname" />
					<text class="valname">1个小写字母</text>
				</view>
				<view class="validateitem">
					<image class="cha" src="/static/img/cha.png" v-if="!yan.maxname" />
					<image class="cha" src="/static/img/gou.png" v-if="yan.maxname" />
					<text class="valname">1个大写字母</text>
				</view>
				<view class="validateitem">
					<image class="cha" src="/static/img/cha.png" v-if="!yan.nums" />
					<image class="cha" src="/static/img/gou.png" v-if="yan.nums" />
					<text class="valname">1个数字</text>
				</view>
			</view>

			<view class="sbotview">
				<view class="tologin " :class="email&&ucode&&password&&password_confirmation?'btn':''" @click="getregisterone">注册</view>
				<text class="Existing-account" @click="tologin">已有账号？<text class="zhutit">登录</text></text>
			</view>
			<view class="tiview">
				<text class="RegistrationTips">注册账号即代表您同意了<text class="tibiao" @click="getfuwu(1)">服务条款、风险与合规披露</text>和<text class="tibiao" @click="getfuwu(2)">隐私政策与声明</text></text>
			</view>
		</view>

		<u-select v-model="bshow" :list="blist" @confirm="bconfirm"></u-select>
		<!-- 验证码 -->
		<view class="nmview">
			<u-popup v-model="yanshow" mode="center" @close="yanclose" width="90%" :closeable="true" z-index="1000">
				<view class="mpop">

					<text class="yantit">
						输入验证码
					</text>
					<text class="youname">验证码已发送至{{email}}</text>
					<view class="yantan">
						<u-message-input @finish="finish" inactive-color="#111" active-color="#111111" width="75" :maxlength="6" font-size="46"></u-message-input>
					</view>
					<view class="yanfa" v-if="isTimer" @click="lockSheet">
						<text>重新发送({{time}}s)</text>
					</view>
					<view class="yanfa" v-else @click="lockSheet">
						<text>获取验证码</text>
					</view>
					<view class="querenben" :class="yanval!=''?'qbtns':''" @click="yanbtn">确认</view>
				</view>
			</u-popup>
		</view>
		
		<!-- <YanPop :yanshow="yanshow" :email="email" :isTimer="isTimer" :time="time"  @yanclose="yanclose" @yanbtn="yanbtn" @getcode="lockSheet"></YanPop> -->
	</view>
</template>

<script>
//  import YanPop from "@/components/YanPop/YanPop";
	export default {
		components:{
			// YanPop
		},
		data() {
			return {
				value:'',
				wang:'',
				bshow:false,
				blist:[
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				yanshow:false,
				email:'',
				type:'REGISTER',
				password:'',
				password_confirmation:'',
				ucode:'',

				timer: null,
				time: 60,
				isTimer: false,
				verify_code:'',//验证码
				yan:{
					length:false,
					minname:false,//小写字母
					maxname:false,//大写字母
					nums:false,//1个数字
				},
				yanval:''
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			finish(e){
				console.log(e)
				this.yanval = e
				
			},
			xuanwang(){
				this.bshow = true
			},
			bconfirm(e){
				console.log(e)
				this.wang = e[0].value
			},
			getrightClick(){
				this.navrouter("/pages/TPage/BiRecord?type=2");
			},
			getfan(){
				uni.navigateBack()
			},
			tologin(){
				uni.reLaunch({ url: '/pages/login/login' })
			},
			yanclose(){
				this.yanshow = false
				this.verify_code = ''
				this.isTimer = false;
				this.time = 60;
				clearInterval(this.timer);
			},
			yanbtn(e){
				console.log(e)
				if(Number(this.yanval.length)<6){
					this.$u.toast('请输入验证码');
					return false
				}
				this.verify_code = this.yanval
				this.getregister()
			},
			// getregister(){
			// 	//点击注册
				
			// 	this.lockSheet()
			// },
			async lockSheet() {
				if(!this.email){
					this.$u.toast("请输入邮箱");
					return false;
				}
				this.yanshow = true
				
				let res = await this.$u.api.sendEmail({
					email: this.email,
					type:'REGISTER'
				});
				this.isTimer = true;
				this.timer = setInterval(() => {
					this.time--
					if (this.time < 0) {
						this.isTimer = false;
						this.time = 60;
						clearInterval(this.timer);
					};
				}, 1000);
				// this.$u.toast("发送成功");
				
				// this.initYpRiddler()
				// this.$refs.captcha.initYpRiddler();
				// this.$refs.captcha.verify();
			},
			getregisterone(){
				if(!this.email){
					this.$u.toast('请输入邮箱');
					return false
				}
				if(!this.ucode){
					this.$u.toast('请输入邀请码');
					return false
				}
				if(!this.password){
					this.$u.toast('请输入密码');
					return false
				}
				if(this.password.length<8){
					this.$u.toast('密码最小长度为8位');
					return false
				}
				if(!this.password_confirmation){
					this.$u.toast('请输入确认密码');
					return false
				}
				if(!this.yan.length||!this.yan.minname||!this.yan.maxname||!this.yan.nums){
					this.$u.toast('请确认密码格式');
					return false
				}
				if(this.password != this.password_confirmation){
					this.$u.toast('确认两次密码是否一致');
					return false
				}
				if(!this.verify_code){
					
					this.lockSheet()
				}
			},
			async getregister(){
				//注册
				let res = await this.$u.api.register({
					email: this.email,
					// type:'REGISTER',
					password:this.password,
					ucode:this.ucode,
					password_confirmation:this.password_confirmation,
					verify_code:this.verify_code
				});
				console.log(res)
				this.$u.toast('注册成功');
				uni.reLaunch({ url: '/pages/login/login' })
			},
			inputchange(e){
				console.log(e)
				let nums = e

				if(nums.length>=8&&nums.length<=32){
					this.yan.length = true
				}else{
					this.yan.length = false
				}
				if(this.containsAtLeastOneNumber(e)){
					this.yan.nums = true
				}else{
					this.yan.nums = false
				}
				if(this.containsAtLeastOneLowercaseLetter(e)){
					this.yan.minname = true
				}else{
					this.yan.minname = false
				}
				if(this.containsAtLeastOneLowercaseLettertwo(e)){
					this.yan.maxname = true
				}else{
					this.yan.maxname = false
				}
			},
			containsAtLeastOneNumber(str) {//验证1个数字
				return /\d/.test(str);
			},
			containsAtLeastOneLowercaseLetter(str) {//验证1个小写字母
				return /[a-z]/.test(str);
			},
			containsAtLeastOneLowercaseLettertwo(str) {//验证1个小写字母
				return /[A-Z]/.test(str);
			},
			getfuwu(e){
				this.navrouter("/pages/TPage/Protocol?type="+e);
			}

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.lone{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 40rpx;
		// #ifdef APP-PLUS
		padding-top: calc(var(--status-bar-height) + 40rpx);;
		// #endif
		.lfan{
			width: 31rpx;
			height: 24rpx;
			margin-right: 20rpx;

		}
		.Loginname{
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
		}
	}
	.logoview{
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 40rpx;
		margin: 60rpx auto 70rpx;
		background: #000000;
		.loview{
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
		}
	}
	.chongji{
		width: 38rpx;
		height: 36rpx;
	}
	.content{
		background-color: #fff;
		padding: 30rpx 38rpx;
		.mpone{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 80rpx;
			.touview{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.tou2{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				position: absolute;
			}
			.xj{
				position: relative;
				z-index: 1;
				width: 42rpx;
				height: 38rpx;
			}
			.mpright{
				flex: 1;
				display: flex;
				flex-direction: column;
				.yxname{
					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 24rpx;
					color: #000000;
				}
				.dengview{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 10rpx;
					.idnum{
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						display: inline-block;
						margin-right: 13rpx;
					}
					.dengji{
						padding: 5rpx 30rpx;
						background: #FF8004;
						border-radius: 14rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
			}
		}
		.qian{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 45rpx;
			.qbiao{
				display: inline-block;
				width: 8rpx;
				height: 36rpx;
				background: #FF8004;
				margin-right: 8rpx;

			}
			.qname{
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 30rpx;
				color: #000000;
			}
		}
		.uone{
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			.uhead{
				display: flex;
				flex-direction: row;
				align-items: center;

			}
			.usdt{
				width: 46rpx;
				height: 46rpx;
				margin-right: 12rpx;
			}
			.Input-label{
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				display: inline-block;
				margin-left: 20rpx;
			}
		}
		// .uone:last-child{
		// 	margin-bottom: 30rpx;
		// }
		.wangmi{
			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 26rpx;
			color: #FF7E00;
		}
		.ushuru{
			padding: 10rpx 25rpx;
			background: #F7F7F7;
			border-radius: 20rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: row;
			min-height: 80rpx;
			/deep/.u-input__input{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
			.xuantit{
				color: #c0c4cc;
			}
			.xactive{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
			}
			.xia{
				margin-left: auto;
				width: 16rpx;
				height: 10rpx;
			}
			.quanbu{
				margin-left: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #010101;
			}
			.huoqu{
				padding: 8rpx 28rpx;
				margin-left: 30rpx;
				background: rgba(255, 128, 4, 1);
				border-radius: 50rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.keyong{
			display: block;
			text-align: right;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 22rpx;
			color: #010101;
			margin-bottom: 75rpx;
		}
		
		.sbotview{
			margin: 65rpx 0 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.shoufei{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 22rpx;
				color: #010101;
				display: block;
				margin-bottom: 15rpx;


			}
			.tologin{
				width: 100%;
				height: 96rpx;
				background: #EBEBEB;
				border-radius: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #A5A5A5;
			}
			.btn{
				background: #030000;
				color: #fff;
			}
			.Existing-account{
				display: block;
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 26rpx;
				color: #A5A5A5;
				margin-top: 40rpx;
			}
			.zhutit{
				color: #000;
			}
		}

		.tiview{
			display: flex;
			.RegistrationTips{
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 24rpx;
				color: #000000;
				display: block;
				text-align: center;
			}
			.tibiao{
				color: #093877;
				display: inline-block;
				margin: 0 1rpx;
			}
		}
		// padding-bottom: 150rpx;
	}
	.validate{
		display: flex;
		flex-direction: column;
		.validateitem{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 10rpx;
			.cha{
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
			.valname{
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
			}

		}
	}

	.mpop{
	// padding: 50rpx 30rpx;
	// // #ifdef APP-PLUS
	// padding-top: calc(var(--status-bar-height) + 50rpx);;
	// // #endif
	background-color: #fff;
	padding: 40rpx;
	border-radius: 40rpx;
	.yantit{
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 43rpx;
		color: #000000;
		display: block;
		margin: 10rpx auto 20rpx;
		text-align: center;
	}
	.youname{
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 30rpx;
		color: #8B8B8B;
		display: block;
		text-align: center;
	}
	.yantan{
		margin: 50rpx 0 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.yanfa{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text{
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 26rpx;
			color: #BBBBBB;
		}
	}
	.querenben{
		height: 96rpx;
		background: #EBEBEB;
		border-radius: 48rpx;
		width: 80%;
		margin: 50rpx auto 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 30rpx;
		color: #A5A5A5;
	}
	.qbtns{
		background: #000000;
		color: #fff;
	}
}
.nmview{
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
}
</style>
